<template>
  <div class="marketing-total">
    <div class="container">
      <h1>领先的私域流量智能营销平台</h1>

      <div class="tab">
        <ul>
          <li
            v-for="item in tabs"
            :key="item.id"
            @mouseenter="tabEnter(item)"
            :class="item.id === tabId ? 'lineHeightTab' : ''"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>

      <div class="cnt">
        <div class="left-cnt">
          <ul>
            <li
              @mouseenter="enter(item)"
              @mouseleave="leave()"
              v-for="item in leftCntList"
              :key="item.id"
              :class="leftId === item.id ? 'lineHeight' : ''"
            >
              <h1>{{ item.title }}</h1>
              <p>{{ item.cnt }}</p>
            </li>
          </ul>
        </div>
        <div
          class="right-cnt animate__animated"
          :class="isRightImg ? 'animate__backInRight' : ''"
        >
          <img :src="rightImg" alt="" />
        </div>
      </div>
      <div class="footer">
        <div class="btn">立即体验</div>
      </div>
    </div>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "marketing",

  data() {
    return {
      tabs: [
        { id: 1, title: "高效获客" },
        { id: 2, title: "销售转化" },
        { id: 3, title: "客户运营" },
        { id: 4, title: "裂变传播" },
        { id: 5, title: "运营管理" },
      ],
      leftId: 1,
      tabId: 1,
      isRightImg: false,
      leftCntList: [],
      leftFirstList: [],
      rightImg: require("../assets/img/Img_1_1.png"),
    };
  },

  mounted() {
    this.leftFirstList = [
      {
        id: 1,
        title: "线上线下多场景快速添加客户微信",
        cnt: "批量导入企业公域客户，构建企业微信客户池",
      },
      {
        id: 2,
        title: "丰富的海报素材支持多场景营销",
        cnt: "提供每日海报、节日问候、营销活动、直播邀请",
      },
      {
        id: 3,
        title: "对外信息窗口，树立企业品牌形象",
        cnt: "支持企业管理员和员工发布历史朋友圈，展示企业",
      },
      {
        id: 4,
        title: "新老客户自动拉群助力社群运营",
        cnt: "自动给新老客户推送进群二维码快速拉群",
      },
    ];
    this.leftCntList = this.leftFirstList;
  },

  methods: {
    enter(item) {
      this.leftId = item.id;
      this.rightImg = require(`../assets/img/Img_${this.tabId}_${item.id}.png`);
      this.isRightImg = true;
      setTimeout(() => {
        this.isRightImg = false;
      }, 500);
    },

    tabEnter(item) {
      this.tabId = item.id;
      this.isRightImg = true;
      setTimeout(() => {
        this.isRightImg = false;
      }, 500);
      if (item.id === 1) {
        this.leftCntList = this.leftFirstList;
        this.rightImg = require("../assets/img/Img_1_1.png");
      } else if (item.id === 2) {
        this.leftCntList = [
          {
            id: 1,
            title: "精细化的销售过程管理，提升企业销售业绩",
            cnt: "从线索转化、商机跟进到订单回款，实时有效监控",
          },
          {
            id: 2,
            title: "便捷的内容管理和分享助力销售成单",
            cnt: "支持多种类型内容素材分享管理，并可追踪营销效果",
          },
          {
            id: 3,
            title: "一键创建群发任务，营销活动快速、规范执行",
            cnt: "支持快速创建企业自动群发任务，提升营销效率",
          },
          {
            id: 4,
            title: "简单易用的营销工具，提升客户和社群营销效率",
            cnt: "提供丰富营销插件，提升客户和社群活跃，促进转化",
          },
        ];
        this.rightImg = require("../assets/img/Img_2_1.png");
      } else if (item.id === 3) {
        this.leftCntList = [
          {
            id: 1,
            title: "自动分类客户和客户群，方便销售跟进重点客户",
            cnt: "按不同意向、状态、价值等进行客户分类，高效筛客",
          },
          {
            id: 2,
            title: "汇聚客户行为数据，分析洞察用户偏好",
            cnt: "提供客户行为记录数据分析，快速洞察客户偏好",
          },
          {
            id: 3,
            title: "自动或手动打标签，可支持基于标签的客户营销",
            cnt: "标签自动批量管理，标签创建群发SOP、营销活动",
          },
          {
            id: 4,
            title: "及时提醒客户流失，改善服务质量、提升留存",
            cnt: "客户删除员工、退群自动推送提醒，及时挽回客户",
          },
        ];
        this.rightImg = require("../assets/img/Img_3_1.png");
      } else if (item.id === 4) {
        this.leftCntList = [
          {
            id: 1,
            title: "激励存量客户参与活动帮助拉新",
            cnt: "通过活动奖励激发存量客户拉新，实现快速客户裂变",
          },
          {
            id: 2,
            title: "激励群成员参与活动帮助拉新",
            cnt: "通过活动奖励激发现有群成员拉新，实现快速社群裂变",
          },
          {
            id: 3,
            title: "通过现金红包激励存量客户帮助拉新",
            cnt: "通过现金红包激发存量客户拉新，实现快速客户裂变",
          },
        ];
        this.rightImg = require("../assets/img/Img_4_1.png");
      } else if (item.id === 5) {
        this.leftCntList = [
          {
            id: 1,
            title: "营销效果和内容转化可追踪，助力运营持续优化",
            cnt: "支持运营相关数据统计，提供员工和客户排名",
          },
          {
            id: 2,
            title: "会话内容云存档，满足合规要求、支持合规审计",
            cnt: "支持会话内容云端留存，满足企业内外部合规审计要求",
          },
          {
            id: 3,
            title: "员工回复超时提醒，提升客户服务质量",
            cnt: "对超时未回复会话进行自动预警，提升服务质量",
          },
          {
            id: 4,
            title: "员工敏感行为自动预警，规避企业经营风险",
            cnt: "自动推送风险预警，减少企业风险",
          },
        ];
        this.rightImg = require("../assets/img/Img_5_1.png");
      }
    },

    leave() {
      console.log(666);
    },
  },
};
</script>

<style lang="scss" scoped>
li {
  list-style-type: none;
}
.marketing-total {
  background: url("../assets/img/marketing.png") no-repeat center;
  color: #fff;
  padding: 80px 0;
  box-sizing: border-box;
  .container {
    width: 1250px;
    margin: 0 auto;
  }
  .lineHeight {
    background: rgba(255, 255, 255, 0.2);
  }
  .lineHeightTab {
    border-bottom: 2px solid rgb(69, 116, 247) !important;
    color: #fff;
  }
  h1 {
    font-size: 36px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
  }
  .tab {
    color: rgb(171, 171, 176);
    margin-top: 80px;
    ul {
      display: flex;
      justify-content: center;
    }
    li {
      margin-right: 77px;
      cursor: pointer;
      height: 28px;
      border-bottom: 2px solid rgb(12, 11, 27);
    }
  }
  .cnt {
    margin-top: 86px;
    display: flex;
    // justify-content: center;
    justify-content: space-between;
    .left-cnt {
      li {
        height: 90px;
        border-radius: 6px;
        margin-bottom: 10px;
        text-align: center;
        padding: 19px 15px 21px 15px;
        box-sizing: border-box;
        line-height: 30px;
        cursor: pointer;
        h1 {
          font-size: 20px;
        }
        p {
          font-size: 16px;
        }
      }
    }
    .right-cnt {
      width: 727px;
      height: 380px;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
  }
  .btn {
    width: 140px;
    height: 48px;
    border: 2px solid #ffffff;
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
    font-family: PingFang SC;
    text-align: center;
    line-height: 48px;
    margin: 89px 0 0 0;
    cursor: pointer;
  }
}
</style>